<template>
  <div class="user-box">
    <div class="user-search">
      <div class="search-input">
        <el-input type="text" placeholder="搜索" :prefix-icon="Search" />
      </div>
      <div class="search-add">
        <el-icon :size="12"><Plus /></el-icon>
      </div>
    </div>
    <el-scrollbar>
      <chat_user_item
        v-for="item in chatUserList"
        :chatUser="item"
        @active="clickUserChat(item)"
        :isActive="item.touserId === toChatUserId"
        @remove="removeUser(item)"
      ></chat_user_item>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { Plus, Search } from "@element-plus/icons-vue";
import { useUserStore } from "@/store";
import ChatMessageApi from "@/api/chat/message";
import { on } from "@/utils/mitt";
import ChatUserApi from "@/api/chat/chatUser";
import { ChatUserModel } from "@/api/chat/chatUser/model";
import { ChatMessage } from "@/api/chat/message/model";
import { MessageTypeEnum } from "@/enums/MessageTypeEnum";
const props = defineProps({
  messageList: Array<ChatMessage>,
  toChatUserId: String,
});
const userStore = useUserStore();

onMounted(async () => {
  await query();

  on("chat:readed:message", (pairID: string) => {
    chatUserList.value.forEach((e, i) => {
      if (e.pairID === pairID) {
        e.newMessageCount -= 1;
        if (e.newMessageCount <= 0) {
          e.hasNewMessage = false;
        }
      }
    });
  });
});

watch(
  () => userStore.chatMessage.length,
  (newValue: number, oldValue: number) => {
    if (newValue > oldValue) {
      //未读消息分发
      messageToUser();
    }
  }
);

const chatUserList = ref<ChatUserModel[]>([]);
const query = async () => {
  const { dataList: userList } = await ChatUserApi.query();
  chatUserList.value = userList;

  //未读消息查询
  const { dataList: noReadList } = await ChatMessageApi.query();

  //更新缓存中所有的未读消息
  userStore.chatMessage = noReadList;

  //分配未读消息
  messageToUser();

  //好友列表自动跳转过来
  const defaultUser = userList.find((x) => x.touserId == props.toChatUserId);
  if (defaultUser) {
    clickUserChat(defaultUser);
  }
};

//未读消息分配
const messageToUser = () => {
  const messageList = userStore.chatMessage;
  messageList.forEach(async (msg) => {
    let isAddChatUser = true;
    chatUserList.value.forEach((user) => {
      if (msg.pairID === user.pairID) {
        user.lastMessage =
          msg.messageType === MessageTypeEnum.IMG ? baseURL + msg.content : msg.content;
        isAddChatUser = false;
        if (!msg.oneSelf) {
          user.hasNewMessage = true;
          user.newMessageCount = messageList.filter(
            (x) => x.pairID === user.pairID && x.oneSelf === false
          ).length;
        }
      }
    });
    if (userStore.chatMessage.length > 0 && isAddChatUser) {
      //新好友消息
      //刷新聊天好友列表
      return await query();
    }
  });
};

const clickUserChat = (user: ChatUserModel) => {
  user.hasNewMessage = false;
  user.newMessageCount = 0;
  //更新当前选择的用户
  emits("update:toChatUserId", user.touserId);
  emits("clickUserChat", user);
};
const emits = defineEmits(["update:toChatUserId", "clickUserChat", "hideUserChat"]);

/** 不显示聊天 */
const removeUser = (chatUser: ChatUserModel) => {
  chatUserList.value = chatUserList.value.filter((x) => x.id != chatUser.id);
  if (props.toChatUserId === chatUser.touserId) {
    emits("hideUserChat");
  }
};
</script>

<style scoped lang="scss">
.user-box {
  height: 100%;
  overflow: hidden;
  border-right: 1px solid #dadbdd;
  width: var(--left-width);
  display: flex;
  flex-direction: column;
}
.user-search {
  height: var(--header-height);
  background-color: #e5e4e400;
  line-height: var(--header-height);
  padding: 0px 10px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

.search-input {
  flex: 1;
}

.search-add {
  display: flex;
  align-items: center;
  height: fit-content;
  padding: 5px;
  // background-color: #e2e2e2;
  border-radius: 4px;
}
</style>

<!-- <style scoped>
.el-input__wrapper{
  background-color: #e2e2e2;
}
</style> -->
